<template>
  <section class="skills section" id="skills">
    <h2 class="section__title skills__title"><i class="iconfont iconfont-daima skills__icon"></i>{{
        $t('skills__title')
      }}</h2>
    <span class="section__subtitle">{{ $t('skills__subtitle') }}</span>

    <div class="skills__container container grid">
      <div>
        <div class="skills__content" :class="openFlag===true?'skills__open':'skills__close'"
             @click="openFlag=!openFlag">
          <div class="skills__header">
            <i class="iconfont icon-brackets-curly skills__icon"></i>

            <div>
              <h1 class="skills__title">
                {{ $t('role') }}
              </h1>
              <span class="skills__subtitle">
                {{ $t('skills__years') }}
              </span>
            </div>

            <i class="iconfont icon-chevrondownxiajiantou skills__arrow"></i>
          </div>
          <div class="skills__list grid">
            <div class="skills__data" v-for="skill in skills" :key="skill.title">
              <div class="skills__titles">
                <h3 class="skills__name">{{ skill.title }}</h3>
                <span class="skills__number">{{ skill.percentage }}</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage" :style="`width: ${skill.percentage}`"></div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import {ref} from 'vue'

export default {
  name: 'AppSkills',
  setup() {
    const skills = ref([
      {
        title: 'html',
        percentage: '90%'
      },
      {
        title: 'css',
        percentage: '50%'
      },
      {
        title: 'js',
        percentage: '70%'
      },
      {
        title: 'vue',
        percentage: '80%'
      },
      {
        title: 'react',
        percentage: '30%'
      },
      {
        title: 'threejs',
        percentage: '25%'
      },
      {
        title: 'node',
        percentage: '20%'
      }
    ])
    const openFlag = ref(true)

    return {
      skills,
      openFlag
    }
  }
}
</script>
<style lang="scss" scoped>
.skills {
  &__container {
    row-gap: 0;
  }

  &__header {
    display: flex;
    align-items: center;
    margin-bottom: var(--mb-2-5);
    cursor: pointer;
  }

  &__icon {
    font-size: 2rem;
    color: var(--first-color);
    margin-right: var(--mb-0-75);
  }

  &__arrow {
    font-size: 1.5rem;
    font-weight: var(--font-semi-bold);
    color: var(--first-color);
    margin-left: auto;
    transition: .4s;
  }

  &__title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-75);
  }

  &__titles {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
  }

  &__subtitle {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
  }

  &__list {
    row-gap: 1.5rem;
    transition: 0.4s;
    @include min-screen(568px) {
      padding-left: 1rem;
    }
    @include min-screen(768px) {
      padding-left: 1.75rem;
    }
    @include min-screen(1024px) {
      padding-left: 2.5rem;
    }
  }

  &__name {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
  }

  &__bar {
    height: 6px;
    border-radius: .25rem;
    background-color: var(--first-color-lighter);
  }

  &__percentage {
    height: 6px;
    border-radius: 0.25rem;
    display: block;
    background-color: var(--first-color);
  }

  &__close {
    .skills__list {
      height: 0;
      overflow: hidden;
    }
  }

  &__open {
    .skills__list {
      height: max-content;
      margin-bottom: var(--mb-2-5);
    }

    .skills__arrow {
      transform: rotate(-180deg);
      transition: 0.5s;
    }
  }
}
</style>
